<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片上传与声纹注册</title>
    <!-- 使用本地构建的 Tailwind CSS -->
    <link href="/css/tailwind.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 保留原有的自定义样式 */
        .d-none { display: none; }
        .animate-shake { animation: shake 0.5s ease-in-out; }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        @keyframes pulse { 
            0% { opacity: 1; } 
            50% { opacity: 0.4; } 
            100% { opacity: 1; } 
        }
        .recording-indicator { 
            display: inline-block; 
            width: 10px; 
            height: 10px; 
            background-color: #dc3545; 
            border-radius: 50%; 
            margin-right: 5px; 
            animation: pulse 1.5s infinite; 
        }
        .volume-meter {
            width: 100%;
            height: 30px;
            background: #e9ecef;
            border-radius: 4px;
            margin: 10px 0;
            overflow: hidden;
        }
        .volume-level {
            height: 100%;
            background: #3B82F6;
            width: 0%;
            transition: width 0.1s;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 min-h-screen flex flex-col">
    <!-- 页面内容保持不变... -->

    <script>
        // 修改后的 AudioRecorder 类
        class AudioRecorder {
            constructor(type) {
                this.type = type;
                this.audioContext = null;
                this.mediaRecorder = null;
                this.audioChunks = [];
                this.recordingTimeout = null;
                this.analyser = null;
                this.maxRecordingTime = 10000;
                this.volumeInterval = null;
            }

            async start() {
                try {
                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    
                    const stream = await navigator.mediaDevices.getUserMedia({ 
                        audio: {
                            echoCancellation: true,
                            noiseSuppression: true,
                            sampleRate: 16000,
                            channelCount: 1
                        } 
                    });
                    
                    const source = this.audioContext.createMediaStreamSource(stream);
                    this.analyser = this.audioContext.createAnalyser();
                    this.analyser.fftSize = 32;
                    source.connect(this.analyser);
                    
                    // 尝试使用更兼容的格式
                    const options = { mimeType: 'audio/webm' };
                    try {
                        this.mediaRecorder = new MediaRecorder(stream, options);
                    } catch (e) {
                        console.warn(`MediaRecorder 不支持 ${options.mimeType}, 使用默认格式`);
                        this.mediaRecorder = new MediaRecorder(stream);
                    }
                    
                    this.audioChunks = [];
                    
                    this.mediaRecorder.addEventListener('dataavailable', event => {
                        this.audioChunks.push(event.data);
                    });
                    
                    this.mediaRecorder.addEventListener('stop', () => {
                        this.onRecordingStop(stream);
                    });
                    
                    this.mediaRecorder.start();
                    this.startVolumeMeter();
                    
                    this.recordingTimeout = setTimeout(() => {
                        this.stop();
                    }, this.maxRecordingTime);
                    
                    this.updateUIState('recording');
                    
                } catch (error) {
                    console.error('录音错误:', error);
                    this.handleError(error);
                }
            }

            // 其余方法保持不变...
        }

        // 其余JavaScript代码保持不变...
    </script>
</body>
</html>